<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

	</head>
	<body>

		<h4>商品列表</h4>
		<hr>
		<table border="1" width="100%">
			<thead>
				<tr>
					<th>编号</th>
					<th>名称</th>
					<th>单价</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="tbody">
				<tr>
					<td id="productList" colspan="4" align="center">点击下方按钮以加载数据</td>
				</tr>
			</tbody>

		</table>
		<br>
		<button id="loadData">加载商品数据</button>
		&nbsp;&nbsp;&nbsp;
		<select id="choosePageSize">
			<option value="5">每页显示5条记录</option>
			<option value="10" selected>每页显示10条记录</option>
			<option value="20">每页显示20条记录</option>
			<option value="30">每页显示30条记录</option>
			<option value="40">每页显示40条记录</option>
			<option value="60">每页显示60条记录</option>
		</select>
		<script>
			//为"加载数据"按钮被单击事件指定处理方法
			loadData.onclick = function() {
				//发起异步请求,获取服务器端接口提供的数据
				//1创建异步请求对象
				let xhr = new XMLHttpRequest()
				//2打开到服务器的连接
				xhr.open('get', '/v2/product/list')
				//3提前准备好：如果加载到了响应数据,该如何处理
				xhr.onload = function() {
					//把响应消息中主体数据放置到表格中
					productList.innerHTML = xhr.responseText
				}
				//4正式的向服务器发出请求消息
				xhr.send()
			}
			
			//为“选择每页显示的条数”下拉菜单的“选项改变事件”指定处理方法
			choosePageSize.onchange = function(){
				//读取下拉菜单当前选中的option的value
				let ps = choosePageSize.value
				console.log(ps)
				//1.创建对象
				let xhr = new XMLHttpRequest()
				//2.打开链接
				xhr.open('GET','/v2/product/list?pageSize='+ ps)
				//3.准备处理
				xhr.onload = function() {
					//把响应消息中主体数据放置到表格中
						productList.innerHTML = xhr.responseText
					 // console.log( typeof(xhr.responseText))   
					 // console.log( xhr.responseText[0].price )   
				    //此次需要对服务器端返回的JSON字符串进行反序列化
					 let data = JSON.parse(xhr.responseText)
					 //console.log( typeof(data))     //object
				   //console.log(data)              //数组
					 let html = `
					   <tr>				   	
                <td>${data[1].lid}</td>
                <td>${data[1].title}</td>
                <td>${data[0].price}</td>
                <td><a href="#" onlick=delectproduct""(${data[1].lid})>删除</a></td>
				        </tr>     					
		            `
								tbody.innerHTML = html
					}
				//4.发起请求
				xhr.send()
			}
		
		
		
		  function deleteProduct(lid){
				console.log('即将删除商品：',lid)
				
				
			}
		</script> 
	</body>
</html>
